const colors = require('tailwindcss/colors')
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      white: colors.white,
      green: colors.green,
      gray: colors.gray,
      blue: colors.sky,
      red: colors.rose,
      pink: colors.fuchsia,
      black: colors.black
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      gridTemplateColumns: {
        '15': 'repeat(15, minmax(0, 1fr))'
      },
      keyframes: {
        animateDialog1: {
          '0%': { transform: 'translateY(-30%)', opacity: '0' },
          '50%': { transform: 'translateY(20%)', opacity: '0.8' },
        },
        animateDialog2: {
          '0%': { transform: 'scale(0.6)', opacity: '0' },
          '50%': { transform: 'scale(1.05)', opacity: '0.8' },
        },
        animateDialog3: {
          '0%': { transform: 'translateY(150%)' },
          '50%': { transform: 'translateY(0%)' },
        }
      },
      animation: {
        'dialogIn-1': 'animateDialog1 .5s ease-in-out',
        'dialogIn-2': 'animateDialog2 .5s ease-in-out',
        'dialogIn-3': 'animateDialog3 .5s ease-in-out',

        'dialogOut-1': 'animateDialog1 .5s ease-in-out reverse',
        'dialogOut-2': 'animateDialog2 .5s ease-in-out reverse',
        'dialogOut-3': 'animateDialog3 .5s ease-in-out reverse',
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    },
    container: {
      center: true,
      padding: '2rem'
    }
  },
  plugins: [],
}
